<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>权限管理 - 权限编辑</title>
		<meta name="description" content="overview &amp; stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<link rel="stylesheet" href="${request.contextPath}/static/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${request.contextPath}/static/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${request.contextPath}/static/assets/css/jquery-ui.custom.min.css" />
		<link rel="stylesheet" href="${request.contextPath}/static/assets/css/jquery.gritter.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="${request.contextPath}/static/assets/fonts/fonts.googleapis.com.css" />
		<!-- BootstrapValidator -->
		<link rel="stylesheet" href="${request.contextPath}/static/assets/css/bootstrapValidator.min.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="${request.contextPath}/static/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<!-- ace settings handler -->
		<link rel="stylesheet" href="${request.contextPath}/static/assets/css/zTreeStyle.css" type="text/css">
		<script src="${request.contextPath}/static/assets/js/ace-extra.min.js"></script>
		<script src="${request.contextPath}/static/assets/js/jquery.2.1.1.min.js"></script>
		<script src="${request.contextPath}/static/assets/js/bootstrap.min.js"></script>
		<script src="${request.contextPath}/static/assets/js/jquery-ui.custom.min.js"></script>
		<script src="${request.contextPath}/static/assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="${request.contextPath}/static/assets/js/bootbox.min.js"></script>
		<script src="${request.contextPath}/static/assets/js/jquery.gritter.min.js"></script>
		<script src="${request.contextPath}/static/assets/js/spin.min.js"></script>
		<!-- ace scripts -->
		<script src="${request.contextPath}/static/assets/js/ace-elements.min.js"></script>
		<script src="${request.contextPath}/static/assets/js/ace.min.js"></script>
		<!-- validator scripts -->
		<script src="${request.contextPath}/static/assets/js/bootstrapValidator.min.js"></script>
		<!-- user scripts -->
		<script src="${request.contextPath}/static/assets/js/user/base.js"></script>
		
	</head>

	<body class="no-skin" style="background-color: #FFF;">
		<div class="page-content">
			<div class="page-header">
				<h1>
					<!-- 权限管理
					<small>
						<i class="ace-icon fa fa-angle-double-right"></i> -->
						<#if menu?? && menu.id??>
						编辑权限
						<#else>
						新增权限
						</#if>
					<!-- </small> -->
				</h1>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<form id="platformForm" class="form-horizontal" role="form" action="${request.contextPath}/saveMenu" method="POST">
						<input type="hidden" id="newtext" name="newtext" value="${newtext?c}">
						<input type="hidden" id="_csrf" name="${_csrf.parameterName}" value="${_csrf.token}"/>
						<#if newtext>
							<div id="menu">
								<div class="space-4"></div>
								<div class="form-group">
									<label class="col-sm-6 control-label no-padding-right" for="form-field-1"> 
										<h1>请双击权限添加子权限</h1>
									</label>
								</div>
								<div class="space-4"></div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 菜单权限 </label>
									<div class="col-sm-9">
										<ul id="menusTree" class="ztree"></ul>
									</div>
								</div>
							</div>
						</#if>
						
					
						<div id="newOrEdit">
						<#if menu?? && menu.id??>
						<input type="hidden" id="id" name="id" value="${menu.id}">
						</#if>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> <strong class="text-danger">*</strong>父级权限 </label>
							<div class="col-sm-9">
								<input type="hidden" id="parent" name="parent" value="${menu.parent!}">
								<input type="hidden" id="parent_id" name="parent_id" value="${menu.parent.id!}">
								<input type="hidden" id="sysCode" name="sysCode" value="${menu.sysCode!}">
								<input type="text" id="parentText" name="parentText" placeholder="请选择父级权限" value="${menu.parent.name!}" class="col-xs-10 col-sm-5" <#if menu?? && menu.id??>disabled='true' readOnly='true'</#if>>
								
							</div>
						</div>
						<div class="space-4"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> <strong class="text-danger">*</strong>名称 </label>
							<div class="col-sm-9">
								<input type="text" id="name" name="name" placeholder="请输入权限名称" value="${menu.name!}" class="col-xs-10 col-sm-5" >
							</div>
						</div>
						<div class="space-4"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> <strong class="text-danger">*</strong>排序 </label>
							<div class="col-sm-9">
								<input type="text" id="sort" name="sort" class="col-xs-10 col-sm-5" placeholder="排序规则升序,如(1,2,3...),否则不允许录入" value="${menu.sort!}" onkeyup="if(event.keyCode !=37 && event.keyCode != 39){if (!/^[\d]+$/ig.test(this.value)){this.value='';}}" <#if menu?? && menu.id??>disabled='true' readOnly='true'</#if>/> 
								<!-- <input type="text" id="sort" name="sort" value="${menu.sort!}"  placeholder="排序规则升序，如(1,2,3...)" class="col-xs-10 col-sm-5" <#if menu?? && menu.id??>disabled='true' readOnly='true'</#if>> --> 
							</div>
						</div>
						<div class="space-4"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 跳转链接 </label>
							<div class="col-sm-9">
								<input type="text" id="href" name="href" value="${menu.href!}" class="col-xs-10 col-sm-5">
							</div>
						</div>
						<div class="space-4"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 图标 </label>
							<!-- <div class="col-sm-9">
								<input type="text" id="icon" name="icon" value="${menu.icon!}" class="col-xs-10 col-sm-5" <#if menu?? && menu.id??>disabled='true' readOnly='true'</#if>>
							</div> -->
							<div class="col-sm-8">
								<input type="text" id="icon" name="icon" value="${menu.icon!}" class="col-xs-2 col-sm-1" disabled='true' readOnly='true'>
								<!-- <label id="iconText" class="col-sm-1 control-label" for="form-field-1">  </label> -->
								<button class="btn btn-info" data-toggle="modal" type="button"
								   data-target="#myModal" <#if menu?? && menu.id??>disabled='true' readOnly='true'</#if>>选择图标
								</button>
							</div>
						</div>
						
						
						<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
						   aria-labelledby="myModalLabel" aria-hidden="true">
						   <div class="modal-dialog">
						      <div class="modal-content">
						         <div class="modal-header">
						            <button type="button" class="close" 
						               data-dismiss="modal" aria-hidden="true">
						                  &times;
						            </button>
						            <h4 class="modal-title" id="myModalLabel">
						               	选择图标(不能选择已使用的图标)
						            </h4>
						         </div>
						         <div class="modal-body">
						         	<div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-tachometer" id="fa-tachometer" /><a href="javascript:void(0)"><i class="fa fa-tachometer"></i> fa-tachometer</a></div>
									<div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-bullhorn" id="fa-bullhorn"/><a href="javascript:void(0)"><i class="fa fa-bullhorn"></i> fa-bullhorn</a></div>
									<div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-list" id="fa-list"/><a href="javascript:void(0)"><i class="fa fa-list"></i> fa-list</a></div>
									<div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-list-alt" id="fa-list-alt"/><a href="javascript:void(0)"><i class="fa fa-list-alt"></i> fa-list-alt</a></div>
						           	<div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-sliders" id="fa-sliders"/><a href="javascript:void(0)"><i class="fa fa-sliders"></i> fa-sliders</a></div>
									<div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-share-alt" id="fa-share-alt"/><a href="javascript:void(0)"><i class="fa fa-share-alt"></i> fa-share-alt</a></div>
									<div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-archive" id="fa-archive"/><a href="javascript:void(0)"><i class="fa fa-archive"></i> fa-archive</a></div>
									<div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-asterisk" id="fa-asterisk"/><a href="javascript:void(0)"><i class="fa fa-asterisk"></i> fa-asterisk</a></div>
									<div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-cog" id="fa-cog"/><a href="javascript:void(0)"><i class="fa fa-cog"></i> fa-cog</a></div>
									<div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-th" id="fa-th"/><a href="javascript:void(0)"><i class="fa fa-th"></i> fa-th</a></div>
									<div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-align-left" id="fa-align-left"/><a href="javascript:void(0)"><i class="fa fa-align-left"></i> fa-align-left</a></div>
									<div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-plus-square" id="fa-plus-square"/><a href="javascript:void(0)"><i class="fa fa-plus-square"></i> fa-plus-square</a></div>
									<div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-spinner" id="fa-spinner"/><a href="javascript:void(0)"><i class="fa fa-spinner"></i> fa-spinner</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-sitemap" id="fa-sitemap"/><a href="javascript:void(0)"><i class="fa fa-sitemap"></i> fa-sitemap</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-vine" id="fa-vine"/><a href="javascript:void(0)"><i class="fa fa-vine"></i> fa-vine</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-windows" id="fa-windows"/><a href="javascript:void(0)"><i class="fa fa-windows"></i> fa-windows</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-cloud" id="fa-cloud"/><a href="javascript:void(0)"><i class="fa fa-cloud"></i> fa-cloud</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-crop" id="fa-crop"/><a href="javascript:void(0)"><i class="fa fa-crop"></i> fa-crop</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-exchange" id="fa-exchange"/><a href="javascript:void(0)"><i class="fa fa-exchange"></i> fa-exchange</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-glass" id="fa-glass"/><a href="javascript:void(0)"><i class="fa fa-glass"></i> fa-glass</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-gift" id="fa-gift"/><a href="javascript:void(0)"><i class="fa fa-gift"></i> fa-gift</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-recycle" id="fa-recycle"/><a href="javascript:void(0)"><i class="fa fa-recycle"></i> fa-recycle</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-share" id="fa-share"/><a href="javascript:void(0)"><i class="fa fa-share"></i> fa-share</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-sort" id="fa-sort"/><a href="javascript:void(0)"><i class="fa fa-sort"></i> fa-sort</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-star" id="fa-star"/><a href="javascript:void(0)"><i class="fa fa-star"></i> fa-star</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-music" id="fa-music"/><a href="javascript:void(0)"><i class="fa fa-music"></i> fa-music</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-film" id="fa-film"/><a href="javascript:void(0)"><i class="fa fa-film"></i> fa-film</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-paw" id="fa-paw"/><a href="javascript:void(0)"><i class="fa fa-paw"></i> fa-paw</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-play" id="fa-play"/><a href="javascript:void(0)"><i class="fa fa-play"></i> fa-play</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-lock" id="fa-lock"/><a href="javascript:void(0)"><i class="fa fa-lock"></i> fa-lock</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-eur" id="fa-eur"/><a href="javascript:void(0)"><i class="fa fa-eur"></i> fa-eur</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-key" id="fa-key"/><a href="javascript:void(0)"><i class="fa fa-key"></i> fa-key</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-inr" id="fa-inr"/><a href="javascript:void(0)"><i class="fa fa-inr"></i> fa-inr</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-rmb" id="fa-rmb"/><a href="javascript:void(0)"><i class="fa fa-rmb"></i> fa-rmb</a></div>
									 <div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="fa-chain" id="fa-chain"/><a href="javascript:void(0)"><i class="fa fa-chain"></i> fa-chain</a></div>
									<div class="fa-hover col-md-3 col-sm-4"><input type="radio" name="showButton" value="" id="none"/><a href="javascript:void(0)"> 无</a></div>
						         </div>
						         <div class="modal-footer">
						            <button type="button" class="btn btn-default" type="button"
						               data-dismiss="modal">关闭
						            </button>
						            <button id="submitIcon" type="button" class="btn btn-primary" type="button">
						              	 提交
						            </button>
						         </div>
						      </div><!-- /.modal-content -->
							</div><!-- /.modal -->
						</div>
						
						
						
						
						<div class="space-4"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> <strong class="text-danger">*</strong>是否在菜单中显示 </label>
							<div class="col-sm-1">
								<select class="form-control" name="isShow" id="isShow" <#if menu?? && menu.id??></#if>>
									<#list isShowList as isShow>
										<option value=${isShow.value} <#if menu.isShow == isShow.value>selected</#if>>${isShow.showName}</option>
									</#list>
								</select>
							</div>
						</div>
						<div class="space-4"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 访问权限 </label>
							<div class="col-sm-9">
								<input type="text" id="permission" name="permission" placeholder="系统访问权限设置，如sys:user:view" value="${menu.permission!}" class="col-xs-10 col-sm-5" ><!-- <#if menu?? && menu.id??>disabled='true' readOnly='true' </#if> -->
							</div>
						</div>
						<div class="space-4"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 备注信息 </label>
							<div class="col-sm-9">
								<input type="text" id="remarks" name="remarks"  value="${menu.remarks!}" class="col-xs-10 col-sm-5" >
							</div>
						</div>
						<div class="space-4"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> <strong class="text-danger">*</strong>是否启用 </label>
							<div class="col-sm-1">
								<select class="form-control" name="delFlag" id="delFlag" <#if menu?? && menu.id??>disabled='true' readOnly='true'</#if>>
									<#list delFlagList as delFlag>
										<option value=${delFlag.value} <#if menu.delFlag == delFlag.value>selected</#if>>${delFlag.showName}</option>
									</#list>
								</select>
							</div>
						</div>

						<div class="clearfix form-actions">
							<div class="col-md-offset-4 col-md-8">
								<button id="submitBtn" class="btn btn-info" type="button">
									<i class="ace-icon fa fa-check bigger-110"></i>
									保存
								</button>
								<button class="btn btn-info" type="button" onclick="history.back();">
									<i class="ace-icon fa fa-check bigger-110"></i>
									取消
								</button>
							</div>
						</div>
						</div>
					</form>
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div>


		<script type="text/javascript" src="${request.contextPath}/static/assets/js/jquery.ztree.all.min.js"></script>
		<!-- inline scripts related to this page -->
		<script type="text/javascript">
		jQuery(function($) {
			var syncCheckedIds = function() {
				var zTree = $.fn.zTree.getZTreeObj("menusTree");
				var nodes = zTree.getCheckedNodes(true);
				var nodeIds = "";
				$.each(nodes, function(index, node) {
					if(isEmpty(nodeIds))
						nodeIds = nodeIds + node.id;
					else
						nodeIds = nodeIds + ',' + node.id;
				});
				$("#menuIds").val(nodeIds);
			};
			var setting = {
				check: {
					enable: true,
					chkboxType: { "Y" : "ps", "N" : "ps" }
				},
				data: {
					simpleData: {
						enable: true
					}
				},
				callback: {
					onCheck: syncCheckedIds
				}
			};
			var zNodes = eval('${menus!}');
			$.fn.zTree.init($("#menusTree"), setting, zNodes);
			
		})
		
			$(document).ready(function(event) {
				var newtext=$("#newtext").val();
				if(newtext=='true'){
					$("#newOrEdit").hide();
				}else{
					$("#newOrEdit").show();
				}
				$(document).dblclick(function (e) { 
					var node_class = $(e.target).attr('class'); 
					if(node_class == 'node_name'){
						node_html = $(e.target).html();
						$.ajax({
							url : '${request.contextPath}/getParent?nodeHtml='+node_html,
							type : "GET",
							success:function(data) {
								if(data.sessionStatus==540){//异步请求session过期状态
									window.location.href="${request.contextPath}/login";
								}else if(data.code == 1) {
									menuData=data.msg;
									$("#menu").hide();
									$("#newOrEdit").show();
									$("#parentText").attr("readonly","readonly");
									/* $("#isShow").attr("checked","checked");
									$("#delFlag").attr("checked","checked"); */
									$("#parentText").val(menuData.name);
									$("#parent").val(menuData);
									$("#parent_id").val(menuData.id);
									$("#sysCode").val(data.sysCode);
									var icons=data.icons;
									for(k in icons){
										$("#"+icons[k]).attr("disabled","true");
										$("#"+icons[k]).attr("readOnly","true");
									}
								} else {
									showMsg(data.msg);
								}
							},
							error:function(data) {
							}
						});
					}
				})
				
				$("#submitIcon").on("click", function(){
					var inputIcon=document.getElementsByName("showButton");
					var iconValue;
					for(k in inputIcon){
						if(inputIcon[k].checked){
							iconValue=inputIcon[k].value;
						}
					}
					$("#icon").val(iconValue);
					console.log($("#icon").val());
					$('#myModal').modal('hide');
				});
			
			
				$('#submitBtn').on('click', function(){
					var parent_id = $("#parent_id").val();
					var name = $("#name").val();
					var sort = $("#sort").val();
					var href = $("#href").val();
					var icon = $("#icon").val();
					var isShow = $("#isShow").val();
					var permission = $("#permission").val();
					var remarks = $("#remarks").val();
					var delFlag = $("#delFlag").val();
					var sysCode = $("#sysCode").val();
					console.log(sysCode)
					//数据合法性校验
					if(isEmpty(name)) {
						$("#name").focus();
						showMsg("名称不能为空！");
					} else if(isEmpty(sort)) {
						$("#sort").focus();
						showMsg("排序不能为空！");
					}else if(isEmpty(isShow)) {
						$("#isShow").focus();
						showMsg("请选择是否显示！");
					} else if(isEmpty(delFlag)) {
						$("#delFlag").focus();
						showMsg("请选择是否启用！");
					} 
					else {
						console.log("=======");
						console.log(sysCode);
						console.log("=======");
						var action="${request.contextPath}/saveMenu?isShowNew="+isShow+"&sort="+sort+"&permissionNew="+permission+"&iconNew="+icon+"&parentId="+parent_id+"&microServiceId="+sysCode;
						console.log(action);
						$("#platformForm").attr("action",action);
						$("#platformForm").submit();
					}
				});
			})
		</script>
	</body>
</html>